<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>菜单管理</title>
  <link rel="stylesheet" th:href="@{/plugin/bootstrap/css/bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{/plugin/font-awesome/css/font-awesome.min.css}">
  <link rel="stylesheet" th:href="@{/plugin/Ionicons/css/ionicons.min.css}">
  <link rel="stylesheet" th:href="@{/adminlte/css/AdminLTE.min.css}">
  <link rel="stylesheet" th:href="@{/adminlte/css/skins/all-skins.min.css}">
  <link rel="stylesheet" th:href="@{/system/css/common.css}">

  <!-- table.css -->
  <link rel="stylesheet" th:href="@{/plugin/bootstrap-table/bootstrap-table.min.css}"/>
</head>
<body>

<table id="menu_table"></table>

<script th:src="@{/plugin/jquery/jquery.min.js}"></script>
<script th:src="@{/plugin/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/plugin/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/plugin/bootstrap-treetable/bootstrap-treetable.js}"></script>

<script>
  var $table = $('#menu_table');


  $(function() {

    $table.bootstrapTreeTable({
      striped: true,	//隔行换色
      search: true,		//定义右上方的搜索框，输入即可以开始搜索
      url: "/menu/list",
      // toolbar: '#toolbar',    //自定义组件
      // pagination: false,	//显示表格的底部工具栏
      // sidePagination: 'server',   //client客户端分页，server服务器分页
      // showColumns: true,	//选列的下拉菜单
      // showRefresh: true,	//刷新按钮
      // showToggle: true,	//视图切换
      // toolbarAlign: 'left',	//自定义按钮位置
      // clickToSelect: true,	//点击行选中
      // singleSelect: true,		//单选
      idField: 'menuId',
      // dataType:'jsonp',
      columns: [

        {
          field: 'selectItem',
          checkbox: true,  //多选框

        },
        {
          field: 'menuName',
          title: '名称' },
        {
          field: 'menuId',
          title: '编号',
          sortable: true,
          align: 'center'},
        // {
        //     field: 'parentId',
        //     title: '所属上级'},
        {
          field: 'status',
          title: '状态',
          sortable: true,
          align: 'center',
          formatter: function(value, row, index) {
            if (value == 0) {
              return '<span class="label label-success">正常</span>';
            } else {
              return '<span class="label label-default">停用</span>';
            }
          }
        },
        {
          field: 'visible',
          title: '显示/隐藏',
          sortable: true,
          align: 'center',
          formatter: function (value, row, index) {
            if (value == 0) {
              return '<span class="label label-success">正常</span>';
            } else {
              return '<span class="label label-default">停用</span>';
            }
          }  },
        {
          field: 'path',
          title: '路由地址' ,
          align: 'center',
        },
        {
          field: 'component',
          title: '组件路径',
          align: 'center',},
        {
          field: 'perms',
          title: '权限标识',
          align: 'center',},
        {
          field: 'menuType',
          title: '菜单类型'  ,
          align: "center",
          formatter:function(value, row, index) {
            if (value === 'M') {  return '目录';  }
            if (value === 'C') {  return '菜单'; }
            if (value === 'F') {  return '按钮'; }
            return '-';
          }
        },
        {
          field: 'orderNum',
          title: '显示顺序',
          align: 'center',},
        {
          field: 'operate',
          title: '操作',
          align: 'left',
          // events : operateEvents,
          formatter: function (value, row, index) {
            return [
              '<button type="button" class="RoleOfadd btn-small  btn-primary" style="margin-right:15px;"><i class="fa fa-plus" ></i>&nbsp;新增</button>',
              '<button type="button" class="RoleOfedit btn-small   btn-primary" style="margin-right:15px;"><i class="fa fa-pencil-square-o" ></i>&nbsp;修改</button>',
              '<button type="button" class="RoleOfdelete btn-small   btn-primary" style="margin-right:15px;"><i class="fa fa-trash-o" ></i>&nbsp;删除</button>'
            ].join('');

          } },
      ],
      onCheck: function (row, element){
        console.log("check");
      },

      // bootstrap-table-treegrid.js 插件配置 -- start

      //指定父id列
      code: "menuId",
      parentCode: 'parentId',
      expandColumn: 1,// 在哪一列上面显示展开按钮
      bordered: true, // 是否显示边框
      expandAll: false, // 是否全部展开
      expandFirst: false,
      sortName:'menuId',
      responseHandler: function (data){
        if (data.code == 200){
          return data.data;
        }
        return [];
      }
    });
  });





</script>

</body>
</html>